<template>
	<view class="container">
		<view class="header">
			<view class="header-item">
				<text class="label">水厂名称：</text>
				<text class="value">{{ order.waterPlantName || '-' }}</text>
			</view>
			<view class="header-item">
				<text class="label">创建日期：</text>
				<text class="value">{{ order.createDate || '-' }}</text>
			</view>
		</view>

		<view class="detail-section">
			<view class="section-title">问题详情</view>
			<view class="detail-item">
				<text class="detail-label">问题类型：</text>
				<view class="issue-type" :class="getTypeClass(order.type)">
					{{ order.type }}
				</view>
			</view>
			<view class="detail-item">
				<text class="detail-label">严重程度：</text>
				<view class="severity" :class="getSeverityClass(order.severity)">
					<text class="star" v-if="order.severity === '严重'">★</text>
					{{ order.severity }}
				</view>
			</view>
			<view class="detail-item">
				<text class="detail-label">问题描述：</text>
				<text class="detail-description">{{ order.description }}</text>
			</view>
		</view>

		<view class="media-section" v-if="order.images && (order.images.length > 0 || order.videos.length > 0)">
			<view class="section-title">问题图片/视频</view>
			<view class="media-grid">
				<view v-for="(img, index) in order.images" :key="'img-' + index" class="media-item" @click="previewImage(img, order.images)">
					<image :src="img" class="media-image" mode="aspectFill" />
				</view>
				<view v-for="(video, index) in order.videos" :key="'video-' + index" class="media-item">
					<video :src="video" class="media-video" />
				</view>
			</view>
		</view>

		<view class="rectification-section">
			<view class="section-title">整改操作</view>
			<view class="upload-buttons">
				<button class="upload-btn" @click="uploadImage">上传图片</button>
				<button class="upload-btn" @click="uploadVideo">上传视频</button>
			</view>
			<view class="uploaded-media" v-if="rectificationMedia.length > 0">
				<view class="media-grid">
					<view v-for="(media, index) in rectificationMedia" :key="'rect-' + index" class="media-item">
						<image v-if="media.type === 'image'" :src="media.url" class="media-image" mode="aspectFill" />
						<video v-else :src="media.url" class="media-video" />
						<view class="delete-btn" @click="deleteMedia(index)">×</view>
					</view>
				</view>
			</view>
			<view class="input-section">
				<text class="input-label">整改说明：</text>
				<textarea v-model="rectificationNote" class="textarea" placeholder="请输入整改说明..." maxlength="500" />
				<text class="char-count">{{ rectificationNote.length }}/500</text>
			</view>
			<button class="submit-btn" :class="{ disabled: !canSubmitProblem }" @click="submitProblemRectification" :disabled="!canSubmitProblem">
				提交整改
			</button>
		</view>
	</view>
</template>

<script>
const zhengaidanApi = uniCloud.importObject('zhengaidan');

export default {
  data() {
    return {
      orderId: '',
      order: {},
      rectificationNote: '',
      rectificationMedia: []
    }
  },
  computed: {
    canSubmitProblem() {
      return this.rectificationNote.trim().length > 0 && this.order.status === '待整改';
    }
  },
  onLoad(options) {
    this.orderId = options.id;
    this.loadOrderData();
  },
  methods: {
    async loadOrderData() {
		uni.showLoading({ title: '加载中...' });
		try {
			const res = await zhengaidanApi.get(this.orderId);
			this.order = res.data[0] || {};
		} catch (e) {
			uni.showToast({ title: '加载失败', icon: 'none' });
		} finally {
			uni.hideLoading();
		}
		this.rectificationNote = '';
		this.rectificationMedia = [];
    },
    uploadImage() {
      uni.chooseImage({
        count: 9,
        success: (res) => {
          res.tempFilePaths.forEach(path => {
            this.rectificationMedia.push({ type: 'image', url: path });
          });
        }
      });
    },
    uploadVideo() {
      uni.chooseVideo({
        success: (res) => {
          this.rectificationMedia.push({ type: 'video', url: res.tempFilePath });
        }
      });
    },
    deleteMedia(index) {
      this.rectificationMedia.splice(index, 1);
    },
    previewImage(current, urls) {
      uni.previewImage({
        current,
        urls
      });
    },
    submitProblemRectification() {
      if (!this.canSubmitProblem) return;
      uni.showModal({
        title: '确认提交',
        content: '确定要提交该问题整改吗？',
        success: async (res) => {
          if (res.confirm) {
			uni.showLoading({ title: '提交中...' });
			// TODO: 文件上传
            const updatedData = {
              status: '已整改',
              rectificationNote: this.rectificationNote,
              rectificationMedia: this.rectificationMedia,
              completionTime: this.getCurrentTime()
            };

			try {
				await zhengaidanApi.update({
					id: this.orderId,
					data: updatedData
				});
				uni.hideLoading();
				uni.showToast({ title: '问题整改已提交', icon: 'success' });
				this.loadOrderData();
			} catch (e) {
				uni.hideLoading();
				uni.showToast({ title: '提交失败: ' + e.errMsg, icon: 'none' });
			}
          }
        }
      });
    },
    getCurrentTime() {
      const now = new Date();
      return now.getFullYear() + '-' + 
        String(now.getMonth() + 1).padStart(2, '0') + '-' + 
        String(now.getDate()).padStart(2, '0') + ' ' +
        String(now.getHours()).padStart(2, '0') + ':' +
        String(now.getMinutes()).padStart(2, '0');
    },
    getTypeClass(type) {
      return {
        'type-equipment': type === '设备',
        'type-hygiene': type === '卫生',
        'type-safety': type === '安全',
        'type-other': !['设备', '卫生', '安全'].includes(type)
      };
    },
    getSeverityClass(severity) {
      return {
        'severity-urgent': severity === '严重',
        'severity-normal': severity === '一般'
      };
    },
    getStatusClass(status) {
      return {
        'status-pending': status === '待整改',
        'status-completed': status === '已整改'
      };
    }
  }
}
</script>

<style scoped>
.container {
	padding: 20rpx;
	background-color: #f5f5f5;
	min-height: 100vh;
}

.header {
	background: white;
	border-radius: 16rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.header-item {
	display: flex;
	align-items: center;
	margin-bottom: 15rpx;
}

.header-item:last-child {
	margin-bottom: 0;
}

.label {
	font-size: 28rpx;
	color: #666;
	margin-right: 20rpx;
	min-width: 140rpx;
}

.value {
	color: #333;
	font-size: 28rpx;
}

.detail-section, .media-section, .rectification-section, .other-issues-section {
	background: white;
	border-radius: 16rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 30rpx;
	padding-bottom: 15rpx;
	border-bottom: 2rpx solid #f0f0f0;
}

.detail-item {
	display: flex;
	align-items: flex-start;
	margin-bottom: 20rpx;
}

.detail-item:last-child {
	margin-bottom: 0;
}

.detail-label {
	font-size: 28rpx;
	color: #666;
	margin-right: 20rpx;
	min-width: 140rpx;
	flex-shrink: 0;
}

.detail-value {
	color: #333;
	font-size: 28rpx;
	flex: 1;
}

.detail-description {
	color: #333;
	font-size: 28rpx;
	line-height: 1.6;
	flex: 1;
}

.issue-type {
	padding: 8rpx 16rpx;
	border-radius: 20rpx;
	font-size: 24rpx;
	color: white;
}

.type-equipment {
	background: #FF6B35;
}

.type-hygiene {
	background: #4ECDC4;
}

.type-safety {
	background: #FF4757;
}

.type-other {
	background: #999;
}

.severity {
	display: flex;
	align-items: center;
	padding: 8rpx 16rpx;
	border-radius: 20rpx;
	font-size: 24rpx;
}

.severity-urgent {
	background: #FFE5E5;
	color: #FF4757;
}

.severity-normal {
	background: #E8F4FD;
	color: #007AFF;
}

.star {
	margin-right: 4rpx;
}

.media-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 15rpx;
}

.media-item {
	position: relative;
	width: 200rpx;
	height: 200rpx;
	border-radius: 12rpx;
	overflow: hidden;
}

.media-image, .media-video {
	width: 100%;
	height: 100%;
}

.delete-btn {
	position: absolute;
	top: 10rpx;
	right: 10rpx;
	width: 40rpx;
	height: 40rpx;
	background: rgba(0, 0, 0, 0.6);
	color: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24rpx;
}

.upload-buttons {
	display: flex;
	gap: 20rpx;
	margin-bottom: 30rpx;
}

.upload-btn {
	background: #E8F4FD;
	color: #007AFF;
	border: 2rpx solid #007AFF;
	border-radius: 8rpx;
	padding: 15rpx 30rpx;
	font-size: 26rpx;
}

.uploaded-media {
	margin-bottom: 30rpx;
}

.input-section {
	margin-bottom: 30rpx;
}

.input-label {
	display: block;
	font-size: 28rpx;
	color: #333;
	margin-bottom: 15rpx;
}

.textarea {
	width: 100%;
	min-height: 200rpx;
	padding: 20rpx;
	border: 2rpx solid #e0e0e0;
	border-radius: 8rpx;
	font-size: 28rpx;
	line-height: 1.6;
	box-sizing: border-box;
}

.char-count {
	display: block;
	text-align: right;
	font-size: 24rpx;
	color: #999;
	margin-top: 10rpx;
}

.submit-btn {
	background: #007AFF;
	color: white;
	border: none;
	border-radius: 50rpx;
	padding: 25rpx;
	font-size: 30rpx;
	width: 100%;
}

.submit-btn.disabled {
	background: #ccc;
	color: #999;
}

.other-issues-list {
	display: flex;
	flex-direction: column;
	gap: 15rpx;
}

.other-issue-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx;
	background: #f8f8f8;
	border-radius: 12rpx;
}

.issue-info {
	flex: 1;
}

.issue-title {
	display: block;
	font-size: 28rpx;
	color: #333;
	margin-bottom: 8rpx;
}

.issue-device {
	font-size: 24rpx;
	color: #666;
}

.issue-status {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.status {
	padding: 6rpx 12rpx;
	border-radius: 16rpx;
	font-size: 22rpx;
	margin-bottom: 8rpx;
}

.status-pending {
	background: #FFF3E0;
	color: #FF9800;
}

.status-completed {
	background: #E8F5E8;
	color: #4CAF50;
}

.completion-time {
	font-size: 20rpx;
	color: #999;
}
</style>